<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
    <div class="eva-container">
      <div class="left-container">
        <el-image :src="evaluation.goodsImage" style="width: 250px"></el-image>
        <div class="show">页面展示：
          <el-tag type="success" v-if="evaluation.isShow == 1">展示</el-tag>
          <el-tag type="danger" v-else>不展示</el-tag>
        </div>
        <div class="show grade">整体评价：
          <dict-tag :options="dict.type.mall_goods_evaluation_grade" :value="evaluation.grade"/>
        </div>
        <div class="show">评价时间：
          {{evaluation.createTime}}
        </div>
        <div class="show">
          <el-avatar :size="size" :src="evaluation.memberProfile"></el-avatar>
        </div>
        <div class="show">
          {{evaluation.memberName}}
        </div>
      </div>
      <div class="right-container">

        <el-descriptions class="margin-top"   :column="1"  border>
<!--          <template slot="extra">-->
<!--            <el-button type="primary" size="small">操作</el-button>-->
<!--          </template>-->
          <el-descriptions-item >
            <template slot="label" style="width: 200px">
              商品
            </template>
            {{evaluation.goodsName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              店铺
            </template>
            {{evaluation.storeName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单
            </template>
            {{evaluation.orderNo}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              评分
            </template>
            <span>物流评分：</span>{{evaluation.deliveryScore}}
            <span>服务评分：</span>{{evaluation.serviceScore}}
            <span>描述评分：</span>{{evaluation.descriptionScore}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              评价
            </template>
            {{evaluation.content}}
            <div>
                 <el-image v-for="img in imgList" :src="img" :preview-src-list="imgList" style="width: 50px;margin-right: 10px"></el-image>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              回复
            </template>
            {{evaluation.reply}}
            <div>
              <el-image v-for="img in replyImgList" :src="img" :preview-src-list="replyImgList" style="width: 50px;margin-right: 10px"></el-image>
            </div>
          </el-descriptions-item>
        </el-descriptions>

      </div>
    </div>
  </div>
</template>

<script>
import {getEvaluation,} from "@/api/mall/goods/evaluation";
export default {
  name: "GoodsEvaluationView",
  dicts: ['sys_is_enable','mall_goods_evaluation_grade'],
  props: {
    evaluationId: {
      type: String
    }
  },
  data() {
    return {
      evaluation: {},
      // 遮罩层
      loading: true,
      imgList: [],
      replyImgList: [],
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    /** 查询商城优惠券列表 */
    getDetail() {
      this.loading = true;
      getEvaluation(this.evaluationId).then(response => {
        this.evaluation = response.data;
        if (this.evaluation.images){
          this.imgList = this.evaluation.images.split(",")
        }
        if (this.evaluation.replyImage){
          this.replyImgList = this.evaluation.replyImage.split(",")
        }
        this.loading = false;
      });
    },
  }
};
</script>

<style scoped>
.eva-container{
  display: flex;
}
.eva-container .left-container{
  flex: 1;
  max-width: 250px;
}
.eva-container .left-container .show{
  margin: 0 auto;
  text-align: center;
  margin-bottom: 10px;
}
.eva-container .left-container .grade{
  justify-content: center;
  display: flex;
}

.eva-container .right-container {
  flex: 1;
}
</style>
